<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form>
      <el-input v-model="id" placeholder="ID" style="width:200px"></el-input>
      <el-input v-model="name" placeholder="名称" style="width:200px"></el-input>
      <el-input v-model="price" placeholder="价格" style="width:200px"></el-input>
      <el-button type="primary" @click="addGood">提交</el-button>
      <el-button type="primary" @click="deleteGood">删除</el-button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      id:'',
      name:'',
      price:''
    }
  },
  methods:{
    addGood(){
      var id = this.id;
      var name = this.name;
      var price = this.price;
      this.$http.post('/api/good/addGood',{
        id:id,
        name:name,
        price:price
      },{}).then((response)=>{
        console.log(response);
      })
    },
    deleteGood(){
      var id = this.id;
      this.$http.post('/api/good/deleteGood',{
        id:id
      },{}).then((response)=>{
        console.log(response)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
